<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div>
     
    </div>
    <script>
        var div = document.querySelector('div')
        var div_X1 = 0,div_X = 0,div_Y = 0,div_Y1 = 0
        var x = 0,y = 0
        div.addEventListener('touchstart',function(e){
            // console.log(1);
            // console.log(e.touches[0].clientX);
            div_X =  e.targetTouches[0].pageX
           div_Y =  e.targetTouches[0].pageY
            console.log(e.targetTouches[0].pageX);
          x =   this.offsetLeft
           y = this.offsetTop 
            
        })
        div.addEventListener('touchmove',function(e){
             div_X1 =  e.targetTouches[0].pageX - div_X
            div_Y1 =  e.targetTouches[0].pageY - div_Y
            this.style.left = x+div_X1 + 'px'
            this.style.top= y+div_Y1 + 'px'
            e.preventDefault();
            
            
        })
        div.addEventListener('touchend',function(){
            // this.style.left = div_X1 - div_X + 'px'
            // this.style.Top = div_Y1 - div_Y + 'px'
        
            
        })
    </script>
</body>
</html>